<template>
  <div class="MusicDetail">
    <!-- 背景图像 -->
    <img class="bgimg" :src="musicList.al.picUrl" alt="" />
    <!-- 头部区域 -->
    <div class="top">
      <div class="T-left">
        <svg class="icon" aria-hidden="true" @click="backHome">
          <use xlink:href="#icon-zuojiantou1"></use>
        </svg>
        <div class="works">
          <Vue3Marquee>{{ musicList.name }}</Vue3Marquee>
          <div class="author">
            <span v-for="item in musicList.ar" :key="item">{{
              item.name
            }}</span>
            <svg class="icon" aria-hidden="true">
              <use xlink:href="#icon-zuojiantou"></use>
            </svg>
          </div>
        </div>
      </div>
      <div class="T-right">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-fenxiang"></use>
        </svg>
      </div>
    </div>
    <!-- 中间区域 -->
    <!-- 磁盘 -->
    <div class="middle" v-show="isLyricShow">
      <img
        class="img_needle"
        src="@/assets/needle-ab.png"
        alt=""
        :class="{ img_needle_active: !isdisplay }"
      />
      <img class="img_cd" src="@/assets/磁盘.png" alt="" />
      <img
        class="img_ar"
        :src="musicList.al.picUrl"
        alt=""
        @click="isLyricShow = false"
        :class="{ img_ar_active: !isdisplay, img_ar_paused: isdisplay }"
      />
    </div>
    <!-- 歌词-->
    <div
      class="musicLyric"
      ref="musicLyric"
      v-show="!isLyricShow"
      @click="isLyricShow = true"
    >
      <p
        v-for="(item, i) in lyric"
        :key="item"
        :class="{
          p_active:
            currentTime * 1000 >= item.time && currentTime * 1000 <= item.pre,
        }"
      >
        {{ item.lrc }}
      </p>
    </div>

    <!-- 底部区域 -->
    <div class="footer">
      <div class="footerTop">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-aixin"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiazai-wenjianxiazai-07"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-yinlechangpian"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xiaoxi"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-liebiao-"></use>
        </svg>
      </div>
      <!-- 进度条 -->
      <div class="footerContent">
        <input type="range" class="range" min="0" :max="duration" v-model="currentTime" step="0.05" />
      </div>
    
      <div class="footerFooter">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-xunhuan"></use>
        </svg>
        <!-- 上一首 -->
        <svg class="icon" aria-hidden="true" @click="goto(-1)">
          <use xlink:href="#icon-shangyishoushangyige"></use>
        </svg>
        <!-- 中间播放键 -->
        <svg
          class="icon bofang"
          aria-hidden="true"
          v-if="isdisplay"
          @click="play"
        >
          <use xlink:href="#icon-bofang"></use>
        </svg>
        <svg class="icon bofang" aria-hidden="true" v-else @click="play">
          <use xlink:href="#icon-gl-pauseCircle"></use>
        </svg>
        <!-- 下一首 -->
        <svg class="icon" aria-hidden="true" @click="goto(1)">
          <use xlink:href="#icon-xiayigexiayishou"></use>
        </svg>
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-zu"></use>
        </svg>
      </div>
    </div>
  </div>
</template>

<script>
import { Vue3Marquee } from "vue3-marquee";
import "vue3-marquee/dist/style.css";
import { mapMutations, mapState } from "vuex";
export default {
  data() {
    return {
      isLyricShow: true,
    };
  },
  props: ["musicList", "isdisplay", "play","addDuration"],
  mounted() {
    // console.log(this.lyricList.lyric);
    this.addDuration()
  },
  methods: {
    ...mapMutations(["alterMusiclDetail", "updateplayListIndex"]),
    backHome() {
      this.isLyricShow = true;
      this.alterMusiclDetail();
    },
    goto(num) {
      // 判断歌曲的长度
      let index = this.playListIndex + num;
      if (index < 0) {
        index = this.playList.length - 1;
      } else if (index == this.playList.length) {
        index = 0;
      }
      this.updateplayListIndex(index); 
    },
  },
  computed: {
    ...mapState(["lyricList", "currentTime", "playListIndex", "playList","duration"]), //将歌曲的数据传入这个组件
    lyric() {
      let arr;
      // 判断是否有歌词
      if (this.lyricList.lyric) {
        //歌词存在
        arr = this.lyricList.lyric.split(/[(\r\n)\r\n]+/).map((item) => {
          let min = item.slice(1, 3);
          let second = item.slice(4, 6);
          let mill = item.slice(7, 10);
          let lrc = item.slice(11, item.length);
          //  总的毫秒时间
          let time =
            parseInt(min) * 60 * 1000 +
            parseInt(second) * 1000 +
            parseInt(mill);
          if (isNaN(Number(mill))) {
            mill = item.slice(7, 9);
            lrc = item.slice(10, item.length);
            time =
              parseInt(min) * 60 * 1000 +
              parseInt(second) * 1000 +
              parseInt(mill);
          }

          return { min, second, mill, lrc, time };
        });
        // 添加下一首歌词的时间
        arr.forEach((item, i) => {
          if (i === arr.length - 1 || isNaN(arr[i + 1].time)) {
            //如果pre的值是NaN，说明已经是最后的一句歌词了
            item.pre = 10000; //已经到最后一句歌词了
          } else {
            item.pre = arr[i + 1].time;
          }
        });
      }
      // console.log(arr);
      return arr;
    },
  },
  watch: {
    // 监听currentTime改变，如果改变对应的歌词的距离就应该改变
    currentTime(newValue) {
      // 获取到正在展示的p标签的信息，p.active 指的是p标签上属性值为active的标签
      let p = document.querySelector("p.p_active");
      // console.log(p.offsetTop);//获取到他标签上的信息
      if (p) {
        if (p.offsetTop > 300) {
          this.$refs.musicLyric.scrollTop = p.offsetTop - 300;
        }
      }
      // 放完后播放下一首
      if(newValue===this.duration){
         if(this.playListIndex==this.playList.length-1){
          this.updateplayListIndex(0)
          this.play()
         }else{
          this.updateplayListIndex(this.playListIndex+1)
         }
      }
    },
  },
  components: {
    Vue3Marquee,
  },
};
</script>


<style lang="less" scoped>
.MusicDetail {
  // padding: 0.2rem;
  height: 100%;
  width: 100%;
  .bgimg {
    position: fixed;
    height: 100%;
    width: 100%;
    z-index: -1;
    filter: blur(70px);
  }

  .top {
    height: 1rem;
    width: 100%;
    // border: 1px solid;
    padding: 0.2rem;
    display: flex;
    // margin-top:10px ;
    .T-left {
      width: 50%;
      height: 100%;
      display: flex;
      align-items: center;
      .icon {
        width: 0.6rem;
        height: 0.6rem;
        fill: #fff;
      }
      .works {
        padding-left: 0.4rem;
        height: 100%;
        display: flex;
        justify-content: center;
        flex-direction: column;
        color: #fff;
        width: 2rem;
        .author {
          height: 0.28rem;
          display: flex;
          width: 1.2rem;
          align-items: center;
          span {
            font-size: 0.24rem;
            color: gray;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
          }
          .icon {
            width: 0.24rem;
            height: 0.24rem;
            fill: gray;
          }
        }
      }
    }
    .T-right {
      width: 50%;
      height: 100%;
      display: flex;
      justify-content: end;
      align-items: center;
      .icon {
        width: 0.6rem;
        height: 0.6rem;
        fill: #fff;
      }
    }
  }
  .middle {
    width: 100%;
    height: 9rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    .img_needle {
      width: 2rem;
      height: 3rem;
      position: absolute;
      left: 46%;
      transform-origin: 0 0;
      transform: rotate(-15deg);
      transition: all 2s;
    }
    .img_needle_active {
      width: 2rem;
      height: 3rem;
      position: absolute;
      left: 46%;
      transform-origin: 0 0;
      transform: rotate(1deg);
      transition: all 2s;
    }

    .img_cd {
      width: 5rem;
      height: 5rem;
      position: absolute;
      bottom: 2.3rem;
      z-index: -1;
    }
    .img_ar {
      width: 3.2rem;
      height: 3.2rem;
      border-radius: 50%;
      position: absolute;
      bottom: 3.14rem;
      animation: rotate_ar 10s linear infinite;
    }
    // 启动动画
    .img_ar_active {
      animation-play-state: running;
    }
    // 停止动画
    .img_ar_paused {
      animation-play-state: paused;
    }

    // 设置一个媒体动画，磁盘旋转
    @keyframes rotate_ar {
      0% {
        transform: rotateZ(0deg);
      }
      100% {
        transform: rotateZ(360deg);
      }
    }
  }
  .musicLyric {
    width: 100%;
    height: 8.5rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    // position: relative;
    margin-top: 0.2rem;
    overflow: scroll;
    p {
      margin-bottom: 0.4rem;
      color:rgb(196, 185, 185);
    }
    .p_active {
      color: #fff;
      font-size: 0.4rem;
    }
  }
  .footer {
    height: 3rem;
    position: absolute;
    width: 100%;
    bottom: 0.2rem;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    .footerTop {
      width: 100%;
      height: 1rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .icon {
        width: 0.6rem;
        height: 0.6rem;
        fill: rgb(245, 234, 234);
      }
    }
    .footerContent {
      // height: 1rem;
      .range{
        height: .06rem;
        width: 100%;
      }
    }
    .footerFooter {
      width: 100%;
      height: 1rem;
      display: flex;
      justify-content: space-around;
      align-items: center;
      .icon {
        fill: rgb(245, 234, 234);
      }
      .bofang {
        width: 1rem;
        height: 1rem;
      }
    }
  }
}
</style>